<template>
  <view class="zxl-avatar">
    <view
      class="zxl-cu-avatar"
      :style="{
        height: avatarHeight + 'rpx',
        width: avatarWidth + 'rpx',
        'border-radius': borderR,
      }"
    >
      <image
        v-if="avatar != ''"
        :src="avatar"
        :style="{
          height: avatarHeight + 'rpx',
          width: avatarWidth + 'rpx',
          'border-radius': borderR,
        }"
      ></image>
      <view
        class="zxl-cir-name"
        :style="{
          height: avatarHeight + 'rpx',
          width: avatarWidth + 'rpx',
          'font-size': avatarfs + 'rpx',
          'border-radius': borderR,
        }"
        v-else
        >{{ simpleName }}</view
      >
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // simpleName: "",
    };
  },
  props: {
    avatarHeight: {
      //头像高度
      type: [Number, String],
      default: 96,
    },
    avatarWidth: {
      // 头像宽度
      type: [Number, String],
      default: 96,
    },
    avatarfs: {
      // 无头像显示姓的字体大小
      type: [Number, String],
      default: 40,
    },
    borderR: {
      // border-radius
      type: [Number, String],
      default: "100%",
    },
    name: [String], // 头像名字
    avatar: [String], // 头像
  },
  computed: {
    simpleName: function() {
      if (this.avatar == "") {
        return this.name.charAt(0);
      }
    },
  },
  mounted() {
    // if (this.avatar == "") {
    //   this.simpleName = this.name.charAt(0);
    // }
  },
};
</script>
<style lang="scss" scoped>
.zxl-avatar {
  .zxl-cu-avatar {
    font-variant: small-caps;
    margin: 0;
    padding: 0;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    text-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: #ccc;
    color: #ffffff;
    white-space: nowrap;
    position: relative;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
  }
  .zxl-cir-name {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: linear-gradient(
      180deg,
      rgba(223, 223, 223, 1) 0%,
      rgba(190, 190, 190, 1) 100%
    );
  }
}
</style>
